<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/detail.css">
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/swiper-3.4.2.min.js"></script>
	<script src="js/vue2.js"></script>
	<script src="js/common.js"></script>
	<script src="js/detail.js"></script>
	<title>商品详情</title>
</head>
<body>
	<div class="container">
		<div class="jd-header-top">
			<div class="jd-header-back"><a href="javascript:;"><span></span></a></div>
			<ul class="jd-header-my">
				<li class="goods"><a class="active" href="javascript:;">商品</a></li>
				<li class="details"><a href="javascript:;">详情</a></li>
				<li class="comment"><a href="javascript:;">评价</a></li>
			</ul>
			<div class="jd-header-coll"><a href="javascript:;"><i></i></a></div>
			<a name="top"></a>
			<ul class="jd-header-menu">
				<li><a href="index.html">
					<span class="home"></span>
					<em>首页</em>
				</a></li>
				<li><a href="category.html">
					<span class="search"></span>
					<em>分类搜索</em>
				</a></li>
				<li><a href="javascript:;">
					<span class="buycar"></span>
					<em>购物车</em>
				</a></li>
				<li><a href="my.html">
					<span class="mineJd"></span>
					<em>我的京东</em>
				</a></li>
			</ul>
		</div>
		<ul class="jd-section" id="jd-detail">
			<li class="fl jd-section-li jd-section-li-first">
				<div class="bgF">
					<div class="swiper-container jd-banner">
						<ul class="swiper-wrapper banner-ul">
						    <li class="swiper-slide" ><img :src="goodsSel.src[src_index]"></li>
						    <li class="swiper-slide"><img src="img/banner/58cb5c5dN0e6b8af3.jpg!q70.jpg"></li>
						    <li class="swiper-slide"><img src="img/banner/58cb5c5aN907dfbeb.jpg!q70.jpg"></li>
						    <li class="swiper-slide"><img src="img/banner/58cb5c55Nd5faad34.jpg!q70.jpg"></li>
						    <li class="swiper-slide"><img src="img/banner/58cb5c4fN57c421ff.jpg!q70.jpg"></li>
						    <li class="swiper-slide"><img src="img/banner/58cb5c5dN0e6b8af3.jpg!q70.jpg"></li>
						    <!-- <li class="swiper-slide"></li> -->
					  	</ul>
					  	<div class="swiperPoint">
					  		<span>1</span>/6
					  	</div>
					</div>
				</div>
				<div class="goodsInfo bgF">
					<div class="goods-name">
						<em>自营</em>
						<span>荣耀 畅玩6X {{goodsSel.size[size_index]}} {{goodsSel.version[version_index]}} {{goodsSel.color[color_index]}}</span>
					</div>
					<div class="goods-price clear-fix">
						<span class="fl">￥ <b>{{price}}</b><i>.00</i></span>
						<em class="fr">降价通知</em>
					</div>
					<div class="goods-intro">
						双镜头，大内存，长续航！<a class="color-f2" href="javascript:;">【点我给你看颜值，戳我到会场！】</a>
					</div>
				</div>
				<div class="promotion bgF">
					<div class="pro-white">
						<i class="color-81">白条</i >
						<span class="color-25">【白条支付】 首单最高立减8元</span>
					</div>
					<div class="pro-sale">
						<div class="sale-top">
							<i class="color-81">促销</i>
							<span class="color-25 coll-hide">可享受以下优惠</span>
							<em class="slide-bg"></em>
						</div>
						<div class="sale-body coll-hide-inline">
							<div class="sale-list">
								<div class="sale-con active">
									<p><i class="color-f2 borRed">满赠</i><a href="javascript:;" class="color-25"><span>满99.00元即赠热销商品，赠完即止，请在购物车点击领取</span><em class="coll-hide"></em></a></p>
								</div>
								<div class="sale-con active">
									<p><i class="color-f2 borRed">加价购</i><a href="javascript:;" class="color-25"><span>满100.00另加25.00元，或满105.00另加45.00元，即可在购物车换购热销商品</span><em class="coll-hide"></em></a></p>
								</div>
								<div class="sale-con active coll-hide-inline">
									<p><i class="color-f2 borRed">满额返券</i><a class="coll-hide color-25" href="javascript:;"><span>购买荣耀手机or平板产品送荣耀数码部分产品东券100-3</span><em></em></a></p>
								</div>
								<div class="sale-con active coll-hide-inline">
									<p><i class="color-f2 borRed">优惠套装</i><a href="javascript:;" class="color-25 coll-hide"><span>最高省<b class="color-f2" >20.0 元</b></span><em></em></a></p>
								</div>
							</div>
							<!-- <div class="swiper-container coll-hide sale-banner">
								<ul class="swiper-wrapper set bgF">
									<li class="swiper-slide">
										<p class="color-81">套装1</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
											<strong>+</strong>
											<em><img src="img/587309a1Nb205ea90.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装2</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
											<strong>+</strong>
											<em><img src="img/587309a1Nb205ea90.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装3</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
											<strong>+</strong>
											<em><img src="img/587309a1Nb205ea90.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装4</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
											<strong>+</strong>
											<em><img src="img/587309a1Nb205ea90.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装5</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装6</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
										</div>
									</li>
									<li class="swiper-slide">
										<p class="color-81">套装7</p>
										<div class="set-show">
											<em><img src="img/58cb5c42N1ce8b049.jpg"></em>
											<strong>+</strong>
											<em><img src="img/583b7d96Nf4035bb2.jpg"></em>
										</div>
									</li>
								</ul>
							</div> -->
						</div>
					</div>
				</div>
				<div class="select-type bgF">
					<i class="select-left color-81">已选</i>
					<div class="selected">
						<span class="color-25">
							{{goodsSel.color[color_index]}} {{goodsSel.size[size_index]}} {{goodsSel.version[version_index]}} {{goods_number}}件
						</span>
						<ul class="secure">
							<li v-if="selected_enture.length<=0" class="color-81">可选延保</li>
							<li class="color-81" v-if="selected_enture.length>0" v-for="(s, i) in selected_enture">
								<span v-if="s!=undefined">
									{{goodsSel.entrue[i][s].name}} 
									{{goodsSel.entrue[i][s].price}}
								</span>
							</li>
						</ul>
						<i class="more"></i>
					</div>
				</div>
				<div class="address bgF">
					<div class="addr">
						<i class="color-81">送至</i>
						<div class="detail-map">北京 朝阳区 管庄<em></em></div>
						<p>现货，23:00前下单,预计明天(05月19日)送达</p>
					</div>
					<div class="weight">
						<i class="color-81">重量</i>
						<p>0.34kg</p>
					</div>
				</div>
				<div class="jd-service">
					<a href="javascript:;"><em></em>京东发货&售后</a>
					<a href="javascript:;"><em></em>京准达</a>
					<a href="javascript:;"><em></em>211限时达</a>
					<a href="javascript:;"><em></em>货到付款</a>
					<a href="javascript:;"><em></em>自提</a>
					<a href="javascript:;"><em></em>七天退货</a>
					<a href="javascript:;"><em class="not-sup"></em>不支持东券、京券</a>
				</div>
				<div class="toPic">
					<div>
						<span class="color-81"><em></em>点击查看图文详情</span>
					</div>
				</div>
				<div class="mask"></div>
				<div class="goods-selectable">
					<div class="goods-show">
						<div class="goods-picture">
							<img :src="goodsSel.src[src_index]"/>
						</div>
						<a class="close" href="javascript:;"><span></span></a>
						<p class="price color-f2">￥<em>{{price}}.00</em></p>
						<p class="sel-weight">重量: <i>0.34kg</i></p>
					</div>
					<div class="scrollDis">
						<ul class="options">
							<li>
								<span class="color-81">已选</span>
								<div class="option-list color-25">
								{{goodsSel.color[color_index]}} {{goodsSel.size[size_index]}} {{goodsSel.version[version_index]}} {{goods_number}}件
								</div>
							</li>
							<li>
								<span class="color-81">颜色</span>
								<div class="option-list color-25 squreBor clear-fix">
									<a href="javascript:;" @click="colorClick(i)" v-for="(v,i) in goodsSel.color" :class="i==color_index?'active':''">{{v}}</a>
								</div>
							</li>
							<li>
								<span class="color-81">版本</span>
								<div class="option-list color-25 squreBor clear-fix">
									<a href="javascript:;" @click="sizeClick(i)" v-for="(v,i) in goodsSel.size" :class="i==size_index?'active':''">{{v}}</a>
								</div>
							</li>
							<li>
								<span class="color-81">选择套装</span>
								<div class="option-list color-25 squreBor clear-fix">
									<a href="javascript:;" @click="versionClick(i)" v-for="(v,i) in goodsSel.version" :class="i==version_index?'active':''">{{v}}</a>
								</div>
							</li>
							<li>
								<span class="color-81">数量</span>
								<div class="numberOpt option-list clear-fix">
									<a @click="reduce" class="fl numberChange" href="javascript:;"><em>-</em></a>
									<input class="fl" type="tel" name="number" v-model.number="goods_number">
									<a @click="add" class="fl numberChange" href="javascript:;"><em>+</em></a>
								</div>
							</li>
						</ul>
						<div class="guarantee">
							<p class="color-81">保障服务</p>
							<ol>
							 	<li v-for="(every_entrue,j) in goodsSel.entrue">
							 		<div class="service-name clear-fix">
								 		<span class="cheap color-25 fl"><em></em>促销特惠</span>
								 		<span class="intro color-f2 fr">服务介绍<i></i></span>
							 		</div>
							 		<div class="service-describe">
							 			<a @click="append(j, i, $event)" v-for="(val,i) in every_entrue" class="color-25" href="javascript:;">
							 				<span class="fl">{{val.name}}</span>
							 				<b class="fl">{{val.price}}</b>
							 			</a>
							 		</div>
							 	</li>
							</ol>
						</div>
					</div>
				</div>
			</li>
			<li class="fl jd-section-li jd-section-li-second">待续
			</li>
			<li class="fl jd-section-li jd-section-li-third">comments</li>
		</ul>
		<div class="fixed-toUp">
			<img src="img/scroll-to-top-icon.png">
		</div>
		<div class="fixed-footer clear-fix">
			<div class="footer-left fl">
				<a href="javascript:;"><em></em>供应商</a>
				<a href="javascript:;"><em></em>关注</a>
				<a href="javascript:;"><em></em>购物车</a>
			</div>
			<div class="footer-right fr">
				<a href="javascript:;" class="add">加入购物车</a>
				<a href="javascript:;" class="buy">立即购买</a>
			</div>
		</div>
	</div>
</body>
</html>